<template>
  <div class="pageView">
    <div class="warp">
      <div class="content-title" v-if="showHandel&&!path">
        <div>{{buildingAlias}}</div>
        <!-- 按钮 -->
        <div>
          <Button type="primary"> <a
              href="https://images.tospurfang.com/doc/%E6%88%B7%E5%9E%8B%E7%AE%A1%E7%90%86%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf"
              style="color:#fff;" target="_blank">查看操作指引</a>
          </Button>
        </div>
      </div>
      <Tabs ref="houseTypeTabs" type="card" v-model="curState" :animated="false"
        @on-click="onChangeTab" name='houseType'>
        <TabPane label="住宅" name="residence" tab='houseType'></TabPane>
        <TabPane label="车位" name="stall" tab='houseType'></TabPane>
        <TabPane label="商铺" name="shop" tab='houseType'></TabPane>
        <TabPane label="办公楼" name="office" tab='houseType'></TabPane>
      </Tabs>
      <Row :gutter="16" v-if="!showHandel">
        <Col span="24" class="tips">
        <Icon type="md-alert" class="tips_icon" />
        <span>以下户型将在“线上售楼处”及“置业计划书”中对外展示，如需添加或编辑户型，请前往“楼盘建模-户型管理”页面<span
            class="AssignCustomers_name" @click="toHouseType(curState)">立即前往</span></span>
        </Col>
      </Row>
      <div>
        <Row type="flex" justify="end" class="Target_btn" v-if="showHandel&&!path">
          <Col>
          <Button type="primary" @click="add()">新增</Button>
          </Col>
        </Row>
        <dt-grid ref="table" :page='page' :onFetch='onFetch' />
      </div>
      <houseDetail ref="detail" @success='onSuccess' />
    </div>
  </div>
</template>
<script>
  import housetypeMgr from '@/biz/housetype/housetype'
  import Column from './opt/columns'
  import houseDetail from './houseDetail.vue'
  export default {
    components: { houseDetail },
    props: {
      showHandel: {
        type: Boolean,
        default: true
      },
      path: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        buildingAlias: this.$dt.buildInfo().housesName,
        curState: 'residence',
        oldState: 'residence',
        columns: [],
        page: {
          rows: 10,
          current: 1
        },
      }
    },
    methods: {
      onChangeTab(val) {
        if (val == this.oldState) return false
        this.tableData = []
        this.page = {
          rows: 10,
          current: 1
        }
        this.oldState = val
        this.$refs.table.init(this, new Column(this))
        this.$refs.table.fetch(true)
      },
      onFetch(data) {
        let params = {
          ...data,
          housesId: this.$dt.buildInfo().housesId,
          type: this.curState
        }
        return housetypeMgr.selectHouseTypeList(params).then(res => {

          return res
        })
      },
      onSuccess() {
        this.$refs.table.fetch()
      },
      add() {
        let title = ''
        switch (this.curState) {
          case 'residence':
            title = '新建住宅'
            break;
          case 'stall':
            title = '新建车位'
            break;
          case 'shop':
            title = '新建商铺'
            break;
          case 'office':
            title = '新建办公楼'
            break;
          default:
            break
        }
        let data = {
          title: title,
          type: this.curState
        }
        this.$refs.detail.create(data, this.curState)
      },
      //查看
      toCheck(rows) {
        console.log(rows)
        let obj = Object.assign(rows)
        let title = ''
        switch (this.curState) {
          case 'residence':
            title = '查看住宅'
            break;
          case 'stall':
            title = '查看车位'
            break;
          case 'shop':
            title = '查看商铺'
            break;
          case 'office':
            title = '查看办公楼'
            break;
          default:
            break
        }
        let data = {
          title: title,
          is_view: true,
          ...obj,
          type: this.curState
        }
        console.log(data)
        this.$refs.detail.view(data, this.curState)
      },
      //编辑
      toEdit(rows) {
        console.log(rows)
        let title = ''
        switch (this.curState) {
          case 'residence':
            title = '编辑住宅'
            break;
          case 'stall':
            title = '编辑车位'
            break;
          case 'shop':
            title = '编辑商铺'
            break;
          case 'office':
            title = '编辑办公楼'
            break;
          default:
            break
        }
        let data = {
          title: title,
          ...rows,
          type: this.curState
        }
        this.$refs.detail.edit(data, this.curState)
      },
      //删除
      doDel(rows) {
        console.log(rows, '删除rows')
        this.$Modal.confirm({
          title: '确定要删除该户型吗？',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            let params = {
                houseTypeId: rows.houseTypeId,
              },
              that = this
            housetypeMgr.delHouseTypeInfo(params).then((res) => {
              this.$Message.success({
                content: '删除成功',
                duration: 1.5,
                onClose() {
                  that.onSuccess()
                },
              })
            })
          },
        })
      },
      toHouseType(data) {
        this.$router.push({
          path: '/buildingModeling/HouseTypeManagement',
          query: {
            curState: data
          },
        })
      },
      relateRoomHandel(rows) {
        this.$emit('relateRoomHandel', rows)
      }
    },
    created() {
      if (this.$route.query.curState) {
        this.curState = this.$route.query.curState
        this.oldState = this.$route.query.curState
      }
    },
    mounted() {
      this.$refs.table.init(this, new Column(this))
      this.$refs.table.fetch()
    },
  }
</script>
<style lang="scss" scoped>
  .pageView {
    padding: 0 15px;

    .warp {
      width: 100%;
      height: 100%;
      overflow: hidden;

      .content-title {
        padding: 20px 10px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        line-height: 30px;
        font-size: 26px;
      }

      .Target_btn {
        margin-bottom: 16px;
      }
    }

    .tips {
      text-align: center;
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      line-height: 32px;

      .tips_icon {
        font-size: 20px;
        color: #0f42a7;
      }

      .AssignCustomers_name {
        margin-left: 10px;
        cursor: pointer;
        color: #0f42a7;
      }
    }
  }
</style>